<template>
  <el-container>
     <el-button @click="handleAddDialog">添加数据</el-button>

    <MyDialog
      :outerVisible="outerVisible"
      :innerVisible="innerVisible"
      :formLabelAlign="formLabelAlign"
      @handleInnerCloseBtn="handleInnerCloseBtn"
      @handleInnerSureBtn="handleInnerSureBtn"
      @handleOuterCloseDialog="handleOuterCloseDialog"
      @handleOuterSureDialog="handleOuterSureDialog"
    ></MyDialog>

     <el-main>
         <el-row>
        <el-table
        :data="tableDataList"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime">
        </el-table-column>

        <el-table-column
          align="right">
        <!--  <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template> -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
     </el-row>
     </el-main>

     <el-footer>
        <el-row>
          <Pagination
          :total="total"
          :pageOpt="pageOpt"
          :pageArray="pageArray"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          ></Pagination>
        </el-row>
     </el-footer>

    </el-container>
</template>

<script>
import { FetchGetBlogsList, FetchAddBlogsList } from '@/api'
import Pagination from '@/components/Pagination'
import MyDialog from '@/components/Dialog'
import Moment from 'moment'
export default {
  components: {
    Pagination,
    MyDialog
  },
  data() {
    return {
      tableData: [],
      search: '',
      total: 0,
      currentPage: '1',
      pageOpt: {
        page:0,
        size: 5
      },
      pageArray: [5, 10, 15],
      outerVisible: false,
      innerVisible: false,
      formLabelAlign: {
        title: '',
        time: '',
        content: ''
      },
      value: ''
    }
  },
  computed: {
    tableDataList() {
      this.tableData.forEach(val => {
        val.createTime = Moment(val.createTime).format('YYYY-MM-DD');
      })
      // console.log('.....:', this.tableData)
      return this.tableData;
    }
  },
  mounted() {
    this.getBlogsList({})
  },
  methods: {
    // 增加接口
    async addBlogsList({ title, createTime, content }) {
      await this.FetchAddBlogsList({ title, createTime, content  })
    },
    // 内层弹出框 取消
    handleInnerCloseBtn() {
      this.innerVisible = false;
    },
    // 内层弹出框确认
    handleInnerSureBtn() {
      this.formLabelAlign.time =  Moment(this.formLabelAlign.time).format('YYYY-MM-DD');
      console.log(this.formLabelAlign, 'formLabelAlign....')
      // 调用接口 传递给后台
      setTimeout(() => {
        this.formLabelAlign = {}
      }, 2000)
      this.outerVisible = false;
      this.innerVisible = false;
    },
    // 外层弹出框 取消
    handleOuterCloseDialog() {
      this.outerVisible = false;
      this.innerVisible = false;
    },
    // 外层弹出框 确认
    handleOuterSureDialog() {
      this.innerVisible = true;
    },
    // 弹出框事件
    handleAddDialog() {
      // 调用弹出框
      this.outerVisible = true;
    },
    handleSizeChange(size) {
      this.pageOpt.size = size;
      this.getBlogsList({page: this.currentPage - 1, size})
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBlogsList({page: val - 1})
    },
    async getBlogsList({ page = 0, size = 5}) {
      console.log('12312312')
      const data = await FetchGetBlogsList({page, size})
      console.log('data: ....', data)
      this.tableData = data.data.data;
      this.total = data.data.total;
    }
  }
}
</script>
